  import React from 'react';
  import ReactDom from 'react-dom';
  import { BrowserRouter, Route, Link,NavLink,Prompt} from 'react-router-dom';

  import Demo from './commpont/exchart/index.jsx';
  const render = ReactDom.render;
  import {Home,PageTwo,PageOne} from './commpont/index.jsx'
  const App = () => (
  <BrowserRouter
  basename ='/'
  forceRefresh={false}
  getUserConfirmation={getConfirmation}
  hashType = 'slash'

  >
    <div>

      <NavLink to="/index"
               exact
               activeStyle={{
                 fontWeight: 'bold',
                 color: 'red'
               }}
      >
        主页面
      </NavLink>
      <NavLink to="/echart"
               exact
               activeStyle={{
                 fontWeight: 'bold',
                 color: 'red'
               }}
      >
       echart
      </NavLink>
      <NavLink to="/two"
               exact
               activeStyle={{
                 fontWeight: 'bold',
                 color: 'red'
               }}
      >
        页面2
      </NavLink>
      <hr/>
      <Route exact path="/" component={Home}/>
      <Route exact path="/index" component={Home}/>
      <Route exact path="/echart" component={Demo}/>
      <Route path="/two" component={PageTwo}/>
    </div>

  </BrowserRouter>
  );

  const getConfirmation = () => {
    //it's html begin to do function , usually skip
  };

  render(<App/>, document.getElementById('react'));



















  //   function BoilingVerdict(props) {
  //   if (props.done) {
  //     return null;
  //   }
  //   return <p>The time is stopped.</p>;
  // }
  //
  // //从父级获取值并进行改变
  //   class TimeInput extends React.Component{
  //     constructor(props){
  //       super(props);
  //       this.handleChage = this.handleChange.bind(this);
  //     }
  //     handleChange(e){
  //       this.props.onTemperatureChange(e.target.value);
  //     }
  //
  //     render(){
  //       const temperature = this.props.temperature;
  //       return(
  //         <div>
  //           <laber>创建时间</laber>
  //           <input type="text" onChange = {this.handleChage}  value={temperature}/>
  //         </div>
  //
  //       )
  //     }
  // }
  //
  //
  //   class Clock extends React.Component{
  //     constructor(props) {
  //       super(props);
  //       this.handleCurDate = this.handleCurDate.bind(this);
  //       this.handleClick = this.handleClick.bind(this);
  //       this.state = {date: new Date(),toggleTime:'end',style:{display:'block'},curDate:new Date().toLocaleTimeString()};
  //     }
  //
  //     handleClick (){
  //       if(this.state.toggleTime == 'end'){
  //         this.setState({
  //           toggleTime: 'start',
  //           style:{display:'none'}
  //         });
  //         clearInterval(this.timerID);
  //       }else {
  //         this.setState({
  //           toggleTime: 'end',
  //           style:{display:'block'}
  //         });
  //         this.timerID = setInterval(
  //           () => this.tick(),
  //           1000
  //         );
  //
  //
  //       }
  //
  //
  //     }
  //
  //     handleCurDate(v){
  //       this.setState({curDate:v})
  //     }
  //
  //     componentDidMount() {
  //       this.timerID = setInterval(
  //         () => this.tick(),
  //         1000
  //       );
  //     }
  //
  //     componentWillUnmount() {
  //       clearInterval(this.timerID);
  //     }
  //
  //     tick() {
  //       this.setState({
  //         date: new Date()
  //       });
  //     }
  //
  //     render(){
  //       return(
  //         <div>
  //           <h1>这是个类{new Date().toLocaleTimeString()}</h1>
  //           <h2  style={this.state.style} classID={this.state.class}>
  //             现在时间是{this.state.date.toLocaleTimeString()}
  //           </h2>
  //           <h3>
  //             创建时间为{this.state.curDate}
  //           </h3>
  //           <BoilingVerdict done ={this.state.toggleTime == 'end'}/>
  //           <button onClick={()=>{this.handleClick()}}>{this.state.toggleTime}</button>
  //           <TimeInput temperature={this.state.curDate} onTemperatureChange={this.handleCurDate}/>
  //
  //         </div>
  //       )
  //     }
  //   }
  //
  // ReactDom.render(
  //   <Clock />,
  //   document.getElementById('react')
  // );



